32 5 React & Django 인증 심화 4 리프레시 토큰 자동 갱신 및 세션 만료 처리 | ✅ 편저: 코담 운영자

🔁 React & Django 인증 심화 4_ 리프레시 토큰 자동 갱신 및 세션 만료 처리

이번 포스트에서는 React 애플리케이션에서 리프레시 토큰 자동 갱신과 Django 백엔드에서의 세션 만료 처리 방법을 살펴봅니다.

---

📌 개요

JWT는 액세스 토큰의 짧은 유효기간을 통해 보안을 강화하지만, 토큰이 만료될 때마다 로그인을 다시 요구하면 사용자 경험이 저하됩니다. 이를 해결하기 위해 리프레시 토큰으로 액세스 토큰을 자동 갱신하는 메커니즘이 필요합니다.

또한 장기간 사용하지 않는 세션을 만료시키는 로직을 적용해 보안을 한층 강화합니다.

---

🔑 12️⃣ Django에서 리프레시 토큰 갱신 뷰 구현

📁 views.py

리프레시 토큰을 사용해 새 액세스 토큰을 발급하고, 쿠키에 설정합니다.

from rest_framework.views import APIView
from rest_framework_simplejwt.tokens import RefreshToken
from rest_framework.response import Response
from rest_framework import status

class TokenRefreshView(APIView):
    def post(self, request):
        refresh_token = request.COOKIES.get('refresh_token')
        if refresh_token is None:
            return Response({'detail': '리프레시 토큰이 없습니다.'}, status=status.HTTP_401_UNAUTHORIZED)

        try:
            token = RefreshToken(refresh_token)
            access_token = str(token.access_token)
            response = Response({'access': access_token}, status=status.HTTP_200_OK)
            return response
        except Exception as e:
            return Response({'detail': '유효하지 않은 리프레시 토큰입니다.'}, status=status.HTTP_401_UNAUTHORIZED)

📁 urls.py

from django.urls import path
from .views import TokenRefreshView

urlpatterns += [
    path('auth/jwt/refresh/', TokenRefreshView.as_view(), name='jwt-refresh'),
]

---

🔄 13️⃣ React에서 자동 토큰 갱신

📁 AuthContext.js 개선

액세스 토큰이 만료되면 백엔드의 /auth/jwt/refresh/ 엔드포인트로 요청해 자동으로 새 토큰을 발급받습니다.

const updateToken = async () => {
  try {
    const response = await api.post('/auth/jwt/refresh/');
    if (response.status === 200) {
      setAuthTokens({ ...authTokens, access: response.data.access });
      localStorage.setItem(
        'authTokens',
        JSON.stringify({ ...authTokens, access: response.data.access })
      );
    }
  } catch (err) {
    console.error('토큰 갱신 실패', err);
    logoutUser();
  }
};

useEffect(() => {
  const interval = setInterval(() => {
    if (authTokens) updateToken();
  }, 1000 * 60 * 4); // 4분마다 갱신

  return () => clearInterval(interval);
}, [authTokens]);

---

⏳ 14️⃣ 세션 만료 처리

백엔드에서 토큰 블랙리스트 기능 활성화:

pip install djangorestframework-simplejwt[django]

settings.py 추가:

INSTALLED_APPS += ['rest_framework_simplejwt.token_blacklist']

마이그레이션 적용:

python manage.py migrate

토큰 회수 시 블랙리스트 등록:

from rest_framework_simplejwt.tokens import RefreshToken

def logout_user(request):
    refresh_token = request.COOKIES.get('refresh_token')
    token = RefreshToken(refresh_token)
    token.blacklist()
    response = Response({'detail': '로그아웃 완료'}, status=200)
    response.delete_cookie('refresh_token')
    return response

---

✅ 마무리

이번 포스트에서는 React와 Django가 협력해 리프레시 토큰 자동 갱신과 세션 만료 처리를 구현했습니다. 이를 통해 장시간 사용하지 않은 토큰을 안전하게 만료시키고, 사용자 경험을 유지할 수 있습니다.

다음 포스트에서는 소셜 로그인 연동(Google, Facebook, Kakao) 을 다루어 OAuth2 인증까지 확장해보겠습니다.